<template>
	<div id="index">
		<div class="content">
			<div class="banner">
				
				<div class="enroll">
					<div class="title">立即报名试听课</div>
					
					<div class="row row_1">
						<div class="icon"></div>
						<span class="prefix">86+</span>
						<input class="input" v-model="param.phoneNumber" id="phoneNumber" type="text"
							   autocomplete="off" spellcheck="false" placeholder="输入手机号码" maxLength="20"/>
					</div>
					<div class="row row_2">
						<div class="icon"></div>
						<input class="input" v-model="param.captcha" id="captcha" type="text"
							   autocomplete="off" spellcheck="false" placeholder="输入短信验证码" maxLength="20"/>
						<div class="code" :class="codeTime>0?'code_wait':''" @click="getCode()">{{codeMsg}}</div>
					</div>
					
					<div class="sure_btn" @click="register()">报 名</div>
				
				</div>
				<div class="banner_panel">
					<div class="banner1_content">
						<div class="banner1_btn"></div>
					</div>
				</div>
			</div>
			
			<div class="why">
				<div class="why_title">
					为什么要培养数学思维？
				</div>
				<div class="why_answer">
					小鳄鱼课堂聚焦思维能力提升，培养孩子解决问题的能力
				</div>
				<div class="why_1">
					<div>培养探究的思维习惯</div>
					<div>
						学数学不只是单纯的背诵公式，
						而是培养主动探究事物背后的原理的能力
					</div>
				</div>
				<div class="why_2">
					<div>掌握解决问题的能力</div>
					<div>
						数学思维培养的是运用知识和逻辑解决生活中问题的能力
					</div>
				</div>
			</div>
			
			<div class="ability">
				<div class="ability_title">3-8岁必须要具备的数学思维能力</div>
				<div class="ability_content">
					根据我国教育部《3-6岁儿童学习与发展指南》，融合美国共同核心州立标准CCSS，小鳄鱼课堂搭
					建思维培养进阶课程体系，培养孩子9大思维能力
				</div>
				<div class="ability_img"></div>
			</div>
			
			<div class="how">
				<div class="how_title">
					小鳄鱼课堂如何培养孩子的数学思维
				</div>
				<div class="how_content">
					<div class="how_panel">
						<div class="how_mask"></div>
						<div class="how_text_1">在线直播</div>
						<div class="how_text_2">小班1V6-8教学，关注到每个孩子</div>
					</div>
					<div class="how_panel">
						<div class="how_mask"></div>
						<div class="how_text_1">优师严选</div>
						<div class="how_text_2">专业化的考核评定，5重关卡严格选拔</div>
					</div>
					<div class="how_panel">
						<div class="how_mask"></div>
						<div class="how_text_1">趣味闯关</div>
						<div class="how_text_2">任务式课程，拒绝枯燥的学习方式</div>
					</div>
					<div class="how_panel">
						<div class="how_mask"></div>
						<div class="how_text_1">效果可见</div>
						<div class="how_text_2">每课测评学习效果，让提升看得见</div>
					</div>
				</div>
			</div>
			
			<div class="teach_fun">
				<div class="teach_fun_title">
					独创5步教学法，形成学习闭环
				</div>
			</div>
			
			<div class="teacher">
				<div class="teacher_title">
					五步骤严选顶尖教师团队
				</div>
				<div class="teacher_step">
					<div>
						重点高校本科以上学历，丰富的一线教学经验
					</div>
					<div>
						2轮资深儿童教育专家初试
					</div>
					<div>
						3次在线真实场景试讲
					</div>
					<div>
						100小时高强度培训
					</div>
					<div>
						终极考核通过
					</div>
				</div>
			</div>
			
			<div class="expert">
				<div class="expert_title">专家团队</div>
				<div class="expert_btn expert_btn_left" @click="expertPage(-1)"></div>
				<div class="expert_btn expert_btn_right" @click="expertPage(1)"></div>
				<div class="expert_scroll">
					<div class="expert_content">
						<div class="expert_panel">
							<div class="expert_img"></div>
							<div class="expert_name">张洁</div>
							<div class="expert_text">
								金色摇篮全程实验学校校长<br>
								23年一线教育教学经验
							</div>
						</div>
						<div class="expert_panel">
							<div class="expert_img"></div>
							<div class="expert_name">李桓</div>
							<div class="expert_text">
								国内幼小衔接高级专家<br/>
								20年儿童教育从教经验
							</div>
						</div>
						<div class="expert_panel">
							<div class="expert_img"></div>
							<div class="expert_name">徐健峰</div>
							<div class="expert_text">
								儿童教育产品负责人<br/>
								10年儿童产品研究和实践经验
							</div>
						</div>
						<div class="expert_panel">
							<div class="expert_img"></div>
							<div class="expert_name">赵甜甜</div>
							<div class="expert_text">
								威创产品研究院院长<br/>
								带领打造儿童教育课程百余套
							</div>
						</div>
						<div class="expert_panel">
							<div class="expert_img"></div>
							<div class="expert_name">赵乐</div>
							<div class="expert_text">
								威创产品研究院高级专家<br/>
								曾任大型教育集团教研管理负责人
							</div>
						</div>
						<div class="expert_panel">
							<div class="expert_img"></div>
							<div class="expert_name">张洁</div>
							<div class="expert_text">
								金色摇篮全程实验学校校长<br>
								23年一线教育教学经验
							</div>
						</div>
						<div class="expert_panel">
							<div class="expert_img"></div>
							<div class="expert_name">李桓</div>
							<div class="expert_text">
								国内幼小衔接高级专家<br/>
								20年儿童教育从教经验
							</div>
						</div>
						<div class="expert_panel">
							<div class="expert_img"></div>
							<div class="expert_name">徐健峰</div>
							<div class="expert_text">
								儿童教育产品负责人<br/>
								10年儿童产品研究和实践经验
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="audition">
				<div class="audition_title">
					如何获取体验课
				</div>
				<div class="audition_panels">
					<div class="audition_panel">
						<div class="audition_mask"></div>
						<div class="audition_content">
							<div class="audition_img"></div>
							<div class="audition_text_1">1</div>
							<div class="audition_text_2">在线报名</div>
							<div class="audition_text_3">输入手机号和验证码</div>
							<!--<div class="audition_text_3">立即报名试听课</div>-->
						</div>
					</div>
					<div class="audition_panel">
						<div class="audition_mask"></div>
						<div class="audition_content">
							<div class="audition_img"></div>
							<div class="audition_text_1">2</div>
							<div class="audition_text_2">顾问预约</div>
							<div class="audition_text_3">专属顾问为您推荐体验课</div>
							<div class="audition_text_3">安排孩子上课时间</div>
						</div>
					</div>
					<div class="audition_panel">
						<div class="audition_mask"></div>
						<div class="audition_content">
							<div class="audition_img"></div>
							<div class="audition_text_1">3</div>
							<div class="audition_text_2">开始上课</div>
							<div class="audition_text_3">进入在线教室开始上课</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="promise">
				<div class="promise_title">我们的承诺</div>
				<div class="promise_content">
					<div class="promise_panel">
						<div class="promise_detail">
							<div class="promise_img animated"></div>
							<div class="promise_text_1">
								专业师资
							</div>
							<div class="promise_text_2">
								研发团队10年以上经验，一线资深名师，严格筛选和培训
							</div>
						</div>
					</div>
					<div class="promise_panel">
						<div class="promise_detail">
							<div class="promise_img animated"></div>
							<div class="promise_text_1">
								品牌资历
							</div>
							<div class="promise_text_2">
								威创集团上市公司，儿童成长领域龙头品牌，品质有保障
							</div>
						</div>
					</div>
					<div class="promise_panel">
						<div class="promise_detail">
							<div class="promise_img animated"></div>
							<div class="promise_text_1">
								售后无忧
							</div>
							<div class="promise_text_2">
								未完成的课时可申请退费，没有后顾之忧
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<!--<div class="bottom_seat"></div>
			<div class="bottom" :class="isFixed? 'bottom_fixed':''">
				<div class="bottom_content">
					<div class="bottom_logo"></div>
				</div>
			</div>-->
		</div>
		
		<div class="dialog animated" :class="open? 'fadeIn':'fadeOut'"
			 v-show="show" :style="{visibility:(visible?'visible':'hidden')}">
			 
			<div class="panel animated" :class="open? 'zoomIn':''">
				<div class="panel_close" @click="closeDialog()"></div>
				<div class="panel_success"></div>
				<div class="panel_title">
					报名信息提交成功
				</div>
				<div class="panel_text">
					您的课程顾问会在24小时内联系您，请耐心等待。
					<br/>
					您也可以拨打我们的服务热线
					<br/>
					010-8748-4928 / 189-1163-6512
				</div>
			</div>
		</div>
		
		<advert></advert>
	</div>
</template>

<script>
//import '../../js/plugins/jquery.easing.min.js'
import advert from '../common/advert'

var vm;
var $home, $index, topHeight;
var $expert,expertLen,expertWidth;

export default {
	components : {
		advert
	},
	data : function() {
		return {
			isFixed : false,
			param : {
				phoneNumber : "",
				captcha : ""
			},
			codeMsg : "获取验证码",
			codeTime : 0,
			show : false,
			open : false,
			visible : false,
			eIndex : 0,
			eTimer : null,
			eWait : true
		}
	},
	methods : {
		setFixed : function() { //设置底部栏定位样式
			//内容高度 + 顶部高度 
			var h1 = $index.outerHeight() + topHeight;
			//容器高度+滚动高度
			var h2 = $home.height() + $home.scrollTop();
			//大于,说明内容还有部分没展示,即底部栏还未出现,固定样式
			vm.isFixed = (h1 > h2)
		},
		getCode : function() {
			//等待验证码过程,不允许再点
			if(vm.codeTime>0) {
				return;
			}
			
			var rules = [{
				judge : tool.judge("phone",vm.param.phoneNumber),
				focus : $("#phoneNumber"),
				tips : "请输入正确的手机号码"
			}];
			if(!tool.validate(rules)) {
				return;
			}
			
			//请求发送验证码接口
			api.captcha({phoneNumber : vm.param.phoneNumber}).then(function(data){
				
				if(data.resultCode == 4025) {
					tool.message({type:"warning",message:"短信发送失败，请检查手机号码是否正确"});
				}
				if(data.resultCode == 4033) {
					tool.message({type:"warning",message:"获取验证码操作频繁，请稍候再试"});
				}
				if(data.resultCode == 2000) {
					tool.message({type:"success",message:"已发送验证码"});
					//重设等待时间,执行等待循环
					vm.codeTime = 61;
					vm.waitCode();
				}
			})
			
		},
		waitCode : function() {
			vm.codeTime--;
			
			//还未减到0,更新提示时间
			if(vm.codeTime>0) {
				vm.codeMsg = vm.codeTime+" s"
				setTimeout(vm.waitCode,1000);
				return;
			}
			//已减到0,复原状态
			vm.codeMsg = "获取验证码";
		},
		register : function() {
			
			var rules = [{
				judge : tool.judge("phone",vm.param.phoneNumber),
				focus : $("#phoneNumber"),
				tips : tips.phone
			},{
				judge : vm.param.captcha,
				focus : $("#captcha"),
				tips : tips.captcha
			}];
			if(!tool.validate(rules)) {
				return;
			}
			
			api.register(vm.param).then(function(data) {
				if(data.resultCode == 4026) {
					tool.message({type:"warning",message:"验证码错误"});
				}
				if(data.resultCode == 2000 || data.resultCode == 4028) {
					vm.param.phoneNumber = "";
					vm.param.captcha = "";
					
					vm.codeTime = 0;
					vm.codeMsg = "获取验证码";
					
					vm.openDialog();
					//10秒自动关闭
					setTimeout(function(){
						vm.closeDialog();
					},10000)
				}
			})
		},
		openDialog : function() {
			vm.show = true;
			setTimeout(function() { 
				vm.open = true; 
				vm.visible = true;
			},1);
		},
		closeDialog : function() {
			if(!vm.open) {
				return;
			}
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
				vm.visible = false;
			},500);
			
			tool.notify({
	          	title: '小鳄鱼提醒您',
	          	message: '您已经注册成为我们的会员，可以通过手机号+短信验证码登录',
	          	type: 'success',
	          	duration: 10000
	        });
			
		},
		expertLoop : function(callback) {
			vm.eWait = false;
			
			vm.eIndex++;
			
			//计算要滚动的距离
			var left = vm.eIndex * expertWidth;
			$expert.animate({scrollLeft : left},1500,function() {
				
				if(vm.eIndex >= expertLen-3) {
					vm.eIndex = 0;
					$expert.scrollLeft(0);
				}
				//动画结束后循环回调自己
				callback();
				vm.eWait = true;
			})
		},
		expertPage : function(num) {  //横幅翻页
			//停止其他动画
			$expert.stop(true,false);
			//如果循环动画不是等待期,即执行动画过程被打断,则触发不到动画结束的回调,需要重新设置循环动画
			if(!vm.eWait) {
				vm.eWait = true;
				vm.eTimer = setTimer(vm.expertLoop,5000);
			}
			
			vm.eIndex += num;
			//如果翻到最前页,还往前翻,则定位到末尾辅助页,再滚动到倒数第二页
			if(vm.eIndex <= -1) {
				vm.eIndex = expertLen - 4;
				var left = (expertLen - 3) * expertWidth;
				$expert.scrollLeft(left);
			}
			//如果翻到末尾辅助页,还往后翻,则定位到首页,再滚动到第二页
			if(vm.eIndex >= expertLen - 2) {
				vm.eIndex = 1;
				$expert.scrollLeft(0);
			}
			//执行滚动
			var left = vm.eIndex * expertWidth;
			$expert.animate({scrollLeft : left},1500,function() {
				//动画结束,如果在辅助页,则回到第一页
				if(vm.eIndex == expertLen-1) {
					vm.eIndex = 0;
				}
//				vm.setLeft();
			});
		}
	},
	mounted : function() {
        
		$home = $("#home");
		$index = $("#index");
		topHeight = $(".home_top").height();
		
		//页面初始设置
//		vm.setFixed();
		//监听滚动事件和窗口大小改变事件
//		$home.scroll(vm.setFixed);
//		$(window).resize(function() {
//			vm.setFixed();
//		});
		
		//承诺栏,鼠标上移添加动画
		$(".promise_detail").hover(function() {
			var $img = $(this).find(".promise_img");
			$img.addClass("swing");
			//动画结束后移除
			setTimeout(function(){
				$img.removeClass("swing");
			},1000)
		},function(){});
		
		//专家栏,加上滚动动画
		$expert = $(".expert_scroll");
		expertLen = $(".expert_panel").length;
		expertWidth = $(".expert_panel").width();
		
		//初次开始循环定时器,周期5s
		vm.eTimer = setTimer(vm.expertLoop,5000);
		
		vm.$once('hook:beforeDestroy', () => {            
		    clearTimer(vm.eTimer);                                    
		})
		
	},
	created : function() {
		vm = this;
	}
}

//自定义循环定时器
function setTimer(fun,time) {
	var timer = {id : ""};
	loop();
	
	function loop() {
		if(timer.id!=null) {
			timer.id = setTimeout(function(){
				fun(loop)
			},time);
		}
	}
	return timer;
}
//停止定时器
function clearTimer(timer) {
	clearTimeout(timer.id);
	timer.id = null;
}
</script>

<style scoped lang="scss" src="../../style/home_page/index.css"></style>